<template>
  <div>
    <el-card :bordered="false" dis-hover class="ivu-mt">
      <el-form
        ref="artFrom"
        :model="thisForm"
        label-width="80px"
        label-position="left"
        @submit.native.prevent
        inline
      >
        <el-form-item label="关键字：" label-for="nickname">
          <el-input
            v-model="thisForm.keywords"
            placeholder="请输入搜索关键字"
            element-id="nickname"
            clearable
          >
            <el-select v-model="thisForm.fieldKey" slot="prepend" style="width: 100px">
              <el-option value="all" label="全部"></el-option>
              <el-option value="title" label="代理名称"></el-option>
              <!-- <el-option value="login_name" label="账号"></el-option> -->
              <el-option value="link_name" label="联系人"></el-option>
              <el-option value="link_mobile" label="联系人手机"></el-option>
            </el-select>
          </el-input>
        </el-form-item>

        <el-form-item label="城市:" label-for="cityId">
          <el-select v-model="thisForm.cityId" @change="CitySelect" :clearable="true">
            <el-option value="all" label="全部"></el-option>
            <el-option
              :value="item.id"
              v-for="item in city_list"
              :key="item.id"
              :label="item.cityName"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="ios-search"
            label="default"
            class="mr15"
            @click="Search"
          >搜索</el-button>
        </el-form-item>
      </el-form>
      <el-row type="flex">
        <el-col v-bind="grid">
          <el-button type="primary" icon="md-add" @click="add">添加代理</el-button>
        </el-col>
      </el-row>
      <el-table
        :columns="Column"
        :data="list"
        :loading="loading"
        highlight-row
        class="mt25"
        ref="table"
        np-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
      >
        <el-table-column label="ID" #default="{row}" min-width="100" fixed="left">{{row.id}}</el-table-column>
        <el-table-column label="所属城市" #default="{row}" min-width="150">{{row.cityName}}</el-table-column>
        <el-table-column label="代理名称" #default="{row}" min-width="150">{{row.title}}</el-table-column>
        <el-table-column label="联系人" #default="{row}" min-width="150">{{row.linkName}}</el-table-column>
        <el-table-column label="联系人手机" #default="{row}" min-width="150">{{row.linkMobile}}</el-table-column>
        <el-table-column label="显示/隐藏" #default="{row}" min-width="150">
          <el-switch
            v-model="row.status"
            :value="row.status"
            :active-value="1"
            :inactive-value="0"
            active-text="显示"
            inactive-text="隐藏"
            @change="onchangeStatus(row)"
            size="large"
          ></el-switch>
        </el-table-column>
        <el-table-column label="创建时间" #default="{row}" min-width="150">{{row.addTimeStr}}</el-table-column>

        <el-table-column label="操作" #default="{row}" min-width="150" fixed="right">
          <a @click="edit (row,'代理详情')">详情</a>
          <el-divider direction="vertical" />
          <a @click="del(row,'删除代理',index)">删除</a>
          <!-- <Divider type="vertical" />
          <a @click="AgentCateList(row)">开通分类</a>-->
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <el-pagination
          :total="page.total"
          :page-size="page.limit"
          :current-page="page.page"
          @current-change="pageChange"
        ></el-pagination>
      </div>
      <el-dialog
        :visible.sync="modals"
        :title="tit"
        class="order_box"
        :closable="false"
        width="600"
        :z-index="50"
      >
        <AgentEdit ref="AgentEdit" v-if="modals" :agentId="table.id" @submitSuccess="submitSuccess"></AgentEdit>
        <div slot="footer" >
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="setAgent()">提交</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { cityList, baseAgentList, setAgentStataus, saveAgentApi ,delAgentApi} from '@/api/base';
import AgentEdit from './components/AgentEdit.vue';
export default {
  name: '',
  components: {
    AgentEdit,
  },
  data() {
    return {
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      // searchType: {
      // 	title: '',//代理名称
      // 	linkName: '',//联系人
      // 	linkMobile: '',//联系人手机
      // },
      modals: false, //详情
      thisForm: {
        cityId: 'all', //所在城市
        fieldKey: 'all', //搜索条件、all、title、link_name、link_mobile
        keywords: '', //关键字
      },
      city_list: [], //城市列表
      page: {
        limit: 10,
        page: 1,
        total: 0,
      },
      loading: false,
      Column: [
        {
          title: 'ID',
          key: 'id',
          minWidth: 100,
        },
        {
          title: '所属城市',
          key: 'city_name',
          minWidth: 150,
        },
        {
          title: '代理名称',
          key: 'title',
          minWidth: 150,
        },
        {
          title: '联系人',
          key: 'linkName',
          minWidth: 150,
        },
        {
          title: '联系人手机',
          key: 'linkMobile',
          minWidth: 150,
        },
        {
          title: '显示/隐藏',
          slot: 'status',
          minWidth: 150,
        },
        {
          title: '排序',
          key: 'sort',
          sortable: true,
          minWidth: 200,
        },
        {
          title: '时间',
          key: 'add_time',
          sortable: true,
          minWidth: 200,
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          minWidth: 150,
        },
      ],
      list: [],
      table:{
		id:0
	  },
      tit: '代理',
      // 分类列表、添加分类
      openCateList: false,
      agent_id: 0,
    };
  },
  created() {
    this.getCitys();
    this.getList();
  },
  mounted() {},
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : 75;
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'left';
    },
  },
  methods: {
    getList() {
      let that = this;
      let data = {
        fieldKey: that.thisForm.fieldKey,
        keywords: that.thisForm.keywords,
        cityId: that.thisForm.cityId,
        page: that.page.page,
        limit: that.page.limit,
      };
      that.loading = true;
      baseAgentList(data).then((res) => {
        that.list = res.list;
        that.page.total = res.total;
        that.loading = false;
      });
    },
    // 搜索
    Search: function (e) {
      this.page.page = 1;
      this.getList();
    },
    //重置搜索内容
    clear() {
      this.thisForm = {
        cityId: 0, //所在城市
        fieldKey: 'all', //搜索条件、all、title、link_name、link_mobile
        keywords: '', //关键字
        cityId: 'all',
      };
      this.getList();
    },
    //选择城市
    CitySelect: function (e) {
      console.log(e);
      this.thisForm.page = 1;
      this.getList()
    },
    //获取城市列表
    getCitys() {
      cityList({ page: 1, limit: 999 }).then((res) => {
        let data = res;
        this.city_list = data.list;
      });
    },
    // 显示隐藏
    onchangeStatus(row) {
      let data = {
        id: row.id,
        status: row.status,
      };
      setAgentStataus(data)
        .then((res) => {
          this.modals = false;
          this.$message.success('操作成功');
          this.getList();
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    // 分页操作
    pageChange(index) {
      this.page.page = index;
      this.getList();
    },
    // 删除
    del(row, tit, num) {
  
      this.$modalSure(`删除${row.title}`)
        .then(() => {
          delAgentApi(row.id).then(res => {
			this.$message.success('操作成功')
			this.getList()
		  })
        })
    },
	add(){
		this.table.id = 0;
		this.modals = true;
	},
	close(){
		this.table.id = 0;
		this.modals = false;
	},
    edit(row, tit) {
      this.tit = tit;
      this.getAgentFrom(row.id);
    },
    getAgentFrom(id) {
		this.table.id = id;
		this.modals = true;


    },
    submitSuccess(){
      this.$modals = false;
      this.table.id = 0;
      this.getList();
    },
    // 审核提交
    setAgent() {
      this.$refs.AgentEdit.setAgent();
    },
  },
};
</script>

<style scoped>
.search-box {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.search-box > div {
  flex-shrink: 0;
}
</style>